import React, { useState } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  Tag,
  Input,
  Select,
  Modal,
  Form,
  Tooltip,
  Progress,
  Popconfirm,
  Row,
  Col,
  Statistic,
  message,
  Descriptions,
  Badge,
  Typography,
  Dropdown,
  MenuProps,
  Divider,
  DatePicker,
  InputNumber,
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  EyeOutlined,
  PauseCircleOutlined,
  PlayCircleOutlined,
  ReloadOutlined,
  MoreOutlined,
  ShopOutlined,
  UserOutlined,
  DatabaseOutlined,
  DollarOutlined,
  GlobalOutlined,
  TeamOutlined,
  BarChartOutlined,
  CalendarOutlined,
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import { PlatformTenantDto } from '../../types/platform';
import { useTenants, useTenantActions } from '../../hooks/business/useTenants';
import dayjs from 'dayjs';

const { Search } = Input;
const { Option } = Select;
const { Text, Title } = Typography;

const TenantManagementPage: React.FC = () => {
  // 搜索和筛选状态
  const [searchText, setSearchText] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  
  // 弹窗状态
  const [modalVisible, setModalVisible] = useState(false);
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  const [editingTenant, setEditingTenant] = useState<PlatformTenantDto | null>(null);
  const [viewingTenant, setViewingTenant] = useState<PlatformTenantDto | null>(null);
  
  // 表单
  const [form] = Form.useForm();

  // 使用自定义hooks
  const { tenants, loading, pagination, updatePagination, refresh } = useTenants({
    search: searchText,
    status: statusFilter === 'all' ? undefined : statusFilter,
  });
  
  const {
    createTenant,
    updateTenant,
    deleteTenant,
    toggleTenantStatus,
    extendTenantExpiry,
    upgradeTenantPlan,
    loading: actionLoading,
  } = useTenantActions();

  // 事件处理函数
  const handleSearch = (value: string) => {
    setSearchText(value);
  };

  const handleStatusFilter = (value: string) => {
    setStatusFilter(value);
  };

  const handleCreate = () => {
    setEditingTenant(null);
    form.resetFields();
    setModalVisible(true);
  };

  const handleEdit = (tenant: PlatformTenantDto) => {
    setEditingTenant(tenant);
    form.setFieldsValue({
      name: tenant.name,
      code: tenant.code,
      contactName: tenant.contactName,
      contactEmail: tenant.contactEmail,
      contactPhone: tenant.contactPhone,
      address: tenant.address,
      description: tenant.description,
      planType: tenant.planType,
      maxUsers: tenant.maxUsers,
    });
    setModalVisible(true);
  };

  const handleView = (tenant: PlatformTenantDto) => {
    setViewingTenant(tenant);
    setDetailModalVisible(true);
  };

  const handleSubmit = async (values: any) => {
    try {
      if (editingTenant) {
        await updateTenant(editingTenant.id!.toString(), values);
      } else {
        await createTenant(values);
      }
      setModalVisible(false);
      refresh();
    } catch (error) {
      // 错误已在hook中处理
    }
  };

  const handleDelete = async (tenantId: string) => {
    try {
      await deleteTenant(tenantId);
      refresh();
    } catch (error) {
      // 错误已在hook中处理
    }
  };

  const handleToggleStatus = async (tenant: PlatformTenantDto) => {
    const newStatus = tenant.status === 1 ? 'suspended' : 'active';
    try {
      await toggleTenantStatus(tenant.id!.toString(), newStatus);
      refresh();
    } catch (error) {
      // 错误已在hook中处理
    }
  };

  const handleExtendExpiry = (tenant: PlatformTenantDto) => {
    Modal.confirm({
      title: '延长有效期',
      content: (
        <div>
          <p>当前到期时间：{tenant.expireTime ? dayjs(tenant.expireTime).format('YYYY-MM-DD') : '未设置'}</p>
          <div style={{ marginTop: 16 }}>
            <label>延长月数：</label>
            <InputNumber 
              min={1} 
              max={24} 
              defaultValue={3} 
              style={{ width: '100%', marginTop: 8 }}
              id="extendMonths"
            />
          </div>
        </div>
      ),
      okText: '确定延长',
      cancelText: '取消',
      onOk: async () => {
        const months = (document.getElementById('extendMonths') as HTMLInputElement)?.value;
        if (months) {
          try {
            await extendTenantExpiry(tenant.id!.toString(), parseInt(months));
            refresh();
          } catch (error) {
            // 错误已在hook中处理
          }
        }
      },
    });
  };

  const handleUpgradePlan = (tenant: PlatformTenantDto) => {
    Modal.confirm({
      title: '升级套餐',
      content: (
        <div>
          <p>当前套餐：{getPlanText(tenant.planType || 'basic')}</p>
          <div style={{ marginTop: 16 }}>
            <label>新套餐：</label>
            <Select 
              defaultValue="pro" 
              style={{ width: '100%', marginTop: 8 }}
              id="newPlanType"
            >
              <Option value="basic">基础版</Option>
              <Option value="pro">专业版</Option>
              <Option value="enterprise">企业版</Option>
            </Select>
          </div>
          <div style={{ marginTop: 16 }}>
            <label>最大用户数：</label>
            <InputNumber 
              min={1} 
              max={10000} 
              defaultValue={100} 
              style={{ width: '100%' }}
              id="newMaxUsers"
            />
          </div>
        </div>
      ),
      okText: '确定升级',
      cancelText: '取消',
      onOk: async () => {
        const planType = (document.getElementById('newPlanType') as HTMLSelectElement)?.value;
        const maxUsers = (document.getElementById('newMaxUsers') as HTMLInputElement)?.value;
        if (planType && maxUsers) {
          try {
            await upgradeTenantPlan(tenant.id!.toString(), planType, parseInt(maxUsers));
            refresh();
          } catch (error) {
            // 错误已在hook中处理
          }
        }
      },
    });
  };

  const getMoreMenuItems = (tenant: PlatformTenantDto): MenuProps['items'] => [
    {
      key: 'extend',
      label: '延长有效期',
      icon: <CalendarOutlined />,
      onClick: () => handleExtendExpiry(tenant),
    },
    {
      key: 'upgrade',
      label: '升级套餐',
      icon: <DollarOutlined />,
      onClick: () => handleUpgradePlan(tenant),
    },
  ];

  const getStatusText = (status: number) => {
    const texts = {
      1: '正常',
      2: '试用',
      3: '已暂停',
      4: '已过期',
      0: '已禁用',
    };
    return texts[status as keyof typeof texts] || status;
  };

  const getStatusColor = (status: number) => {
    const colors = {
      1: 'success',
      2: 'processing',
      3: 'warning',
      4: 'error',
      0: 'default',
    };
    return colors[status as keyof typeof colors] || 'default';
  };

  const getPlanColor = (planType: string) => {
    const colors = {
      basic: 'blue',
      pro: 'geekblue',
      enterprise: 'purple',
    };
    return colors[planType as keyof typeof colors] || 'default';
  };

  const getPlanText = (planType: string) => {
    const texts = {
      basic: '基础版',
      pro: '专业版',
      enterprise: '企业版',
    };
    return texts[planType as keyof typeof texts] || planType;
  };

  const columns: ColumnsType<PlatformTenantDto> = [
    {
      title: '租户名称',
      dataIndex: 'name',
      key: 'name',
      width: 180,
      render: (name) => (
        <div style={{ 
          fontWeight: 600, 
          fontSize: 14, 
          color: '#262626'
        }}>
          {name}
        </div>
      ),
    },
    {
      title: '租户编码',
      dataIndex: 'code',
      key: 'code',
      width: 120,
      render: (code) => (
        <div style={{ 
          fontFamily: 'Monaco, Consolas, monospace',
          fontSize: 13,
          color: '#1890ff',
          backgroundColor: '#f0f8ff',
          padding: '2px 6px',
          borderRadius: 4,
          border: '1px solid #d6e4ff'
        }}>
          {code}
        </div>
      ),
    },
    {
      title: '套餐',
      dataIndex: 'planType',
      key: 'planType',
      width: 100,
      render: (planType) => (
        <Tag color={getPlanColor(planType || 'basic')} style={{ fontSize: 12 }}>
          {getPlanText(planType || 'basic')}
        </Tag>
      ),
    },
    {
      title: '用户数',
      key: 'userCount',
      width: 100,
      render: (_, record) => (
        <div style={{ fontSize: 13 }}>
          <div style={{ fontWeight: 500, color: '#262626' }}>
            {record.currentUsers || 0}/{record.maxUsers || 0}
          </div>
          <div style={{ fontSize: 11, color: '#8c8c8c' }}>
            {record.maxUsers ? Math.round(((record.currentUsers || 0) / record.maxUsers) * 100) : 0}%
          </div>
        </div>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status) => {
        const text = getStatusText(status);
        const color = getStatusColor(status);
        const colors = {
          success: '#52c41a',
          processing: '#1890ff',
          warning: '#faad14',
          error: '#ff4d4f',
          default: '#d9d9d9',
        };
        return (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div 
              style={{ 
                width: 8, 
                height: 8, 
                borderRadius: '50%',
                backgroundColor: colors[color as keyof typeof colors]
              }}
            />
            <span style={{ fontSize: 13, fontWeight: 500 }}>{text}</span>
          </div>
        );
      },
    },
    {
      title: '联系人',
      key: 'contact',
      width: 150,
      render: (_, record) => (
        <div>
          <div style={{ 
            fontWeight: 500, 
            fontSize: 14, 
            color: '#262626',
            marginBottom: 2
          }}>
            {record.contactName || '-'}
          </div>
          <div style={{ 
            fontSize: 12, 
            color: '#8c8c8c'
          }}>
            {record.contactEmail || '-'}
          </div>
        </div>
      ),
    },
    {
      title: '到期时间',
      dataIndex: 'expireTime',
      key: 'expireTime',
      width: 100,
      render: (expireTime) => {
        const isExpiring = expireTime && dayjs(expireTime).diff(dayjs(), 'day') < 30;
        return (
          <div style={{ fontSize: 13 }}>
            <div style={{ 
              color: isExpiring ? '#ff4d4f' : '#595959',
              fontWeight: isExpiring ? 500 : 400
            }}>
              {expireTime ? dayjs(expireTime).format('MM-DD') : '-'}
            </div>
            {expireTime && (
              <div style={{ fontSize: 11, color: '#8c8c8c' }}>
                {dayjs(expireTime).format('YYYY')}
              </div>
            )}
          </div>
        );
      },
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      fixed: 'right',
      render: (_, record) => (
        <Space size="small">
          <Button
            type="text"
            size="small"
            icon={<EyeOutlined />}
            onClick={() => handleView(record)}
            style={{ color: '#1890ff' }}
          >
            详情
          </Button>
          <Button
            type="text"
            size="small"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
            style={{ color: '#52c41a' }}
          >
            编辑
          </Button>
          <Popconfirm
            title="删除租户"
            description="确定要删除这个租户吗？删除后无法恢复。"
            onConfirm={() => handleDelete(record.id!.toString())}
            okText="确定"
            cancelText="取消"
            okType="danger"
          >
            <Button
              type="text"
              size="small"
              icon={<DeleteOutlined />}
              style={{ color: '#ff4d4f' }}
            >
              删除
            </Button>
          </Popconfirm>
          <Dropdown 
            menu={{ items: getMoreMenuItems(record) }}
            trigger={['click']}
          >
            <Button
              type="text"
              size="small"
              icon={<MoreOutlined />}
              style={{ color: '#8c8c8c' }}
            />
          </Dropdown>
        </Space>
      ),
    },
  ];

  return (
    <div>
      {/* 租户管理页面 */}
      <Card bodyStyle={{ padding: 0 }}>
        <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Title level={4} style={{ margin: 0, color: '#262626' }}>
            <ShopOutlined style={{ marginRight: 8 }} />
            租户管理
          </Title>
          <Space>
            <Search
              placeholder="搜索租户名称、代码或联系人"
              allowClear
              style={{ width: 300 }}
              onSearch={handleSearch}
            />
            <Select
              value={statusFilter}
              onChange={handleStatusFilter}
              style={{ width: 120 }}
            >
              <Option value="all">全部状态</Option>
              <Option value="1">正常</Option>
              <Option value="2">试用</Option>
              <Option value="3">已暂停</Option>
              <Option value="4">已过期</Option>
              <Option value="0">已禁用</Option>
            </Select>
            <Button 
              type="primary" 
              icon={<PlusOutlined />}
              onClick={handleCreate}
            >
              新建租户
            </Button>
            <Button 
              icon={<ReloadOutlined />}
              onClick={refresh}
              loading={loading}
            >
              刷新
            </Button>
          </Space>
        </div>
        
        <div style={{ padding: '0 24px 24px' }}>
          <Table
            columns={columns}
            dataSource={tenants}
            loading={loading}
            rowKey="id"
            pagination={{
              ...pagination,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
              onChange: (page, pageSize) => updatePagination(page, pageSize),
               onShowSizeChange: (current, size) => updatePagination(current, size),
            }}
            scroll={{ x: 1200 }}
          />
        </div>
      </Card>

      {/* 创建/编辑租户弹窗 */}
      <Modal
        title={
          <Space>
            {editingTenant ? <EditOutlined /> : <PlusOutlined />}
            <span>{editingTenant ? '编辑租户' : '新建租户'}</span>
          </Space>
        }
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={null}
        width={700}
        styles={{
          body: {
            padding: '20px'
          }
        }}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          style={{ marginTop: 8 }}
        >
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="租户名称"
                name="name"
                rules={[{ required: true, message: '请输入租户名称' }]}
              >
                <Input placeholder="请输入租户名称" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="租户代码"
                name="code"
                rules={[
                  { required: true, message: '请输入租户代码' },
                  { pattern: /^[a-zA-Z0-9_-]+$/, message: '只能包含字母、数字、下划线和横线' }
                ]}
              >
                <Input placeholder="请输入租户代码" disabled={!!editingTenant} />
              </Form.Item>
            </Col>
          </Row>
          
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="套餐类型"
                name="planType"
                rules={[{ required: true, message: '请选择套餐类型' }]}
              >
                <Select placeholder="请选择套餐类型">
                  <Option value="basic">基础版</Option>
                  <Option value="pro">专业版</Option>
                  <Option value="enterprise">企业版</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="最大用户数"
                name="maxUsers"
                rules={[{ required: true, message: '请输入最大用户数' }]}
              >
                <InputNumber 
                  placeholder="请输入最大用户数" 
                  min={1} 
                  max={10000}
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
          </Row>
          
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="联系人姓名"
                name="contactName"
                rules={[{ required: true, message: '请输入联系人姓名' }]}
              >
                <Input placeholder="请输入联系人姓名" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="联系人邮箱"
                name="contactEmail"
                rules={[
                  { required: true, message: '请输入联系人邮箱' },
                  { type: 'email', message: '请输入有效的邮箱地址' }
                ]}
              >
                <Input placeholder="请输入联系人邮箱" />
              </Form.Item>
            </Col>
          </Row>
          
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="联系人电话"
                name="contactPhone"
              >
                <Input placeholder="请输入联系人电话" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="地址"
                name="address"
              >
                <Input placeholder="请输入地址" />
              </Form.Item>
            </Col>
          </Row>
          
          <Form.Item
            label="描述"
            name="description"
          >
            <Input.TextArea rows={3} placeholder="请输入租户描述" />
          </Form.Item>

          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setModalVisible(false)}>
                取消
              </Button>
              <Button type="primary" htmlType="submit" loading={actionLoading}>
                {editingTenant ? '更新' : '创建'}
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 租户详情弹窗 */}
      <Modal
        title={
          <div style={{ fontSize: 18, fontWeight: 600, color: '#262626' }}>
            <ShopOutlined style={{ marginRight: 8, color: '#1890ff' }} />
            租户详情
          </div>
        }
        open={detailModalVisible}
        onCancel={() => setDetailModalVisible(false)}
        footer={null}
        width={700}
        styles={{
          header: {
            paddingBottom: 12
          },
          body: {
            padding: '16px 20px'
          }
        }}
      >
        {viewingTenant && (
          <div>
            {/* 基本信息卡片 */}
            <Card 
              title={
                <div style={{ fontSize: 16, fontWeight: 600, color: '#262626' }}>
                  <UserOutlined style={{ marginRight: 8, color: '#1890ff' }} />
                  基本信息
                </div>
              }
              style={{ 
                marginBottom: 12,
                borderRadius: 8,
                boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
              }}
              bodyStyle={{ padding: '12px 16px' }}
            >
              <Row gutter={[16, 12]}>
                <Col span={12}>
                  <div style={{ marginBottom: 12 }}>
                    <div style={{ 
                      fontSize: 14, 
                      color: '#8c8c8c', 
                      marginBottom: 4,
                      fontWeight: 500
                    }}>租户名称</div>
                    <div style={{ 
                      fontSize: 16, 
                      color: '#262626', 
                      fontWeight: 600,
                      backgroundColor: '#fafafa',
                      padding: '8px 12px',
                      borderRadius: 6,
                      border: '1px solid #f0f0f0'
                    }}>{viewingTenant.name}</div>
                  </div>
                </Col>
                <Col span={12}>
                  <div style={{ marginBottom: 12 }}>
                    <div style={{ 
                      fontSize: 14, 
                      color: '#8c8c8c', 
                      marginBottom: 4,
                      fontWeight: 500
                    }}>租户代码</div>
                    <div style={{ 
                      fontSize: 16, 
                      color: '#1890ff', 
                      fontWeight: 600,
                      fontFamily: 'Monaco, Consolas, monospace',
                      backgroundColor: '#f0f8ff',
                      padding: '8px 12px',
                      borderRadius: 6,
                      border: '1px solid #d6e4ff'
                    }}>{viewingTenant.code}</div>
                  </div>
                </Col>
                <Col span={12}>
                  <div style={{ marginBottom: 12 }}>
                    <div style={{ 
                      fontSize: 14, 
                      color: '#8c8c8c', 
                      marginBottom: 4,
                      fontWeight: 500
                    }}>套餐类型</div>
                    <div>
                      <Tag 
                        color={getPlanColor(viewingTenant.planType || 'basic')} 
                        style={{ 
                          fontSize: 14, 
                          padding: '4px 12px',
                          fontWeight: 500
                        }}
                      >
                        {getPlanText(viewingTenant.planType || 'basic')}
                      </Tag>
                    </div>
                  </div>
                </Col>
                <Col span={12}>
                  <div style={{ marginBottom: 12 }}>
                    <div style={{ 
                      fontSize: 14, 
                      color: '#8c8c8c', 
                      marginBottom: 4,
                      fontWeight: 500
                    }}>状态</div>
                    <div>
                      <Tag 
                        color={getStatusColor(viewingTenant.status || 1)} 
                        style={{ 
                          fontSize: 14, 
                          padding: '4px 12px',
                          fontWeight: 500
                        }}
                      >
                        {getStatusText(viewingTenant.status || 1)}
                      </Tag>
                    </div>
                  </div>
                </Col>
              </Row>
            </Card>

            {/* 使用情况卡片 */}
            <Card 
              title={
                <div style={{ fontSize: 16, fontWeight: 600, color: '#262626' }}>
                  <BarChartOutlined style={{ marginRight: 8, color: '#1890ff' }} />
                  使用情况
                </div>
              }
              style={{ 
                marginBottom: 12,
                borderRadius: 8,
                boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
              }}
              bodyStyle={{ padding: '12px 16px' }}
            >
              <Row gutter={[16, 12]}>
                <Col span={12}>
                  <div style={{ 
                    textAlign: 'center', 
                    padding: '16px 12px',
                    backgroundColor: '#f8faff',
                    borderRadius: 8,
                    border: '1px solid #e6f4ff'
                  }}>
                    <div style={{ 
                      fontSize: 28, 
                      fontWeight: 700, 
                      color: '#1890ff',
                      marginBottom: 4
                    }}>
                      {viewingTenant.currentUsers || 0}
                    </div>
                    <div style={{ 
                      fontSize: 14, 
                      color: '#8c8c8c',
                      fontWeight: 500
                    }}>当前用户数</div>
                  </div>
                </Col>
                <Col span={12}>
                  <div style={{ 
                    textAlign: 'center', 
                    padding: '16px 12px',
                    backgroundColor: '#f6ffed',
                    borderRadius: 8,
                    border: '1px solid #d9f7be'
                  }}>
                    <div style={{ 
                      fontSize: 28, 
                      fontWeight: 700, 
                      color: '#52c41a',
                      marginBottom: 4
                    }}>
                      {viewingTenant.expireTime ? 
                        Math.max(0, dayjs(viewingTenant.expireTime).diff(dayjs(), 'day')) : 0
                      }
                    </div>
                    <div style={{ 
                      fontSize: 14, 
                      color: '#8c8c8c',
                      fontWeight: 500
                    }}>剩余天数</div>
                  </div>
                </Col>
              </Row>
              
              <div style={{ marginTop: 16 }}>
                <div style={{ 
                  fontSize: 14, 
                  color: '#8c8c8c', 
                  marginBottom: 8,
                  fontWeight: 500
                }}>用户使用率</div>
                <Progress 
                  percent={viewingTenant.maxUsers ? 
                    Math.round(((viewingTenant.currentUsers || 0) / viewingTenant.maxUsers) * 100) : 0
                  }
                  strokeColor="#1890ff"
                  trailColor="#f0f0f0"
                  strokeWidth={8}
                  format={(percent) => (
                    <span style={{ fontSize: 14, fontWeight: 600 }}>
                      {viewingTenant.currentUsers || 0}/{viewingTenant.maxUsers || 0}
                    </span>
                  )}
                />
              </div>
            </Card>

            {/* 联系人信息卡片 */}
            <Card 
              title={
                <div style={{ fontSize: 16, fontWeight: 600, color: '#262626' }}>
                  <TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
                  联系人信息
                </div>
              }
              style={{ 
                borderRadius: 8,
                boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
              }}
              bodyStyle={{ padding: '12px 16px' }}
            >
              <Row gutter={[16, 12]}>
                <Col span={12}>
                  <div style={{ marginBottom: 12 }}>
                    <div style={{ 
                      fontSize: 14, 
                      color: '#8c8c8c', 
                      marginBottom: 4,
                      fontWeight: 500
                    }}>联系人</div>
                    <div style={{ 
                      fontSize: 16, 
                      color: '#262626', 
                      fontWeight: 600
                    }}>{viewingTenant.contactName || '-'}</div>
                  </div>
                </Col>
                <Col span={12}>
                  <div style={{ marginBottom: 12 }}>
                    <div style={{ 
                      fontSize: 14, 
                      color: '#8c8c8c', 
                      marginBottom: 4,
                      fontWeight: 500
                    }}>邮箱</div>
                    <div style={{ 
                      fontSize: 16, 
                      color: '#1890ff', 
                      fontWeight: 500
                    }}>{viewingTenant.contactEmail || '-'}</div>
                  </div>
                </Col>
                <Col span={12}>
                  <div style={{ marginBottom: 12 }}>
                    <div style={{ 
                      fontSize: 14, 
                      color: '#8c8c8c', 
                      marginBottom: 4,
                      fontWeight: 500
                    }}>电话</div>
                    <div style={{ 
                      fontSize: 16, 
                      color: '#262626', 
                      fontWeight: 500
                    }}>{viewingTenant.contactPhone || '-'}</div>
                  </div>
                </Col>
                <Col span={12}>
                  <div style={{ marginBottom: 12 }}>
                    <div style={{ 
                      fontSize: 14, 
                      color: '#8c8c8c', 
                      marginBottom: 4,
                      fontWeight: 500
                    }}>地址</div>
                    <div style={{ 
                      fontSize: 16, 
                      color: '#262626', 
                      fontWeight: 500
                    }}>{viewingTenant.address || '-'}</div>
                  </div>
                </Col>
              </Row>
              
              {viewingTenant.description && (
                <div style={{ 
                  marginTop: 16, 
                  paddingTop: 16, 
                  borderTop: '1px solid #f0f0f0'
                }}>
                  <div style={{ 
                    fontSize: 14, 
                    color: '#8c8c8c', 
                    marginBottom: 8,
                    fontWeight: 500
                  }}>描述</div>
                  <div style={{ 
                    fontSize: 16, 
                    color: '#595959', 
                    lineHeight: 1.6,
                    backgroundColor: '#fafafa',
                    padding: '12px 16px',
                    borderRadius: 6,
                    border: '1px solid #f0f0f0'
                  }}>
                    {viewingTenant.description}
                  </div>
                </div>
              )}
            </Card>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default TenantManagementPage;